<template>
  <div class="detail">
    <my-nav-bar
      left-arrow
      left-text="返回"
      @click-left="$router.back()"
      title="商品详情"
    ></my-nav-bar>
    <div class="scroll">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="red">
        <van-swipe-item v-for="(item, index) in detailData.pics" :key="item.goods_id">
          <img class="swipe_img" :src="item.pics_big" />
        </van-swipe-item>
      </van-swipe>
      <p class="price">￥{{ detailData.goods_price }}</p>
      <section class="dec_ct">
        <div class="left">{{ detailData.goods_name }}</div>
        <div class="right">
          <van-icon name="star-o" />
          <p>收藏</p>
        </div>
      </section>
      <van-tabs v-model:active="active">
        <van-tab title="商品简介">
          <div v-html="detailData.goods_introduce"></div>
        </van-tab>
        <van-tab title="商品规格">
          <ul class="attrs">
            <li v-for="(item, index) in detailData.attrs" :key="index">
              <!-- &#x3000; 中文空格 -->
              <span>{{ item.attr_name }}:&#x3000;</span>
              <span>{{ item.attr_value }}</span>
            </li>
          </ul>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 底部的导购栏 -->
    <van-action-bar>
      <van-action-bar-icon icon="chat-o" text="客服" dot />
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="cartList.length"
        @click="$router.push('/cart')"
      />
      <van-action-bar-icon icon="shop-o" text="店铺" />
      <van-action-bar-button type="warning" text="加入购物车" @click="addCart" />
      <van-action-bar-button type="danger" text="立即购买" @click="pay" />
    </van-action-bar>
    <!-- 弹窗组件 -->
    <van-dialog v-model:show="show" title="立即支付">
      <div class="qrbox" ref="qrbox"></div>
    </van-dialog>
  </div>
</template>

<script>
import { getdetail } from "../api/other/index";
import QRCode from "qrcodejs2";
import { showConfirmDialog } from "vant";
import { mapState } from "vuex";
export default {
  data() {
    return {
      detailData: {}, // 详情数据
      active: 0, //选择的tab
      show: false, // 控制弹窗显示隐藏
    };
  },
  computed: {
    ...mapState(["cartList"]),
  },
  created() {
    // console.log(this.$route.params);
    // 获取详情数据的接口
    getdetail({ goods_id: this.$route.params.id }).then((res) => {
      this.detailData = res.message;
    });
  },
  methods: {
    addCart() {
      // 加入购物车的事件
      if (!this.$store.state.token) {
        // this.$router.push("/login");
        showConfirmDialog({
          title: "提示",
          message: "您还没有登录，请先登录",
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      } else {
        // let obj = {
        //   id: this.detailData.goods_id, // 商品id
        //   img: this.detailData.goods_small_logo, // 商品的图片
        //   price: this.detailData.goods_price, // 商品价格
        //   name: this.detailData.goods_name, // 商品名称
        //   buyNum: 1, // 购买数量
        //   flag: false, // 选中的状态
        // };
        let { goods_id, goods_small_logo, goods_price, goods_name } = this.detailData;
        this.$store.commit("saveCart", {
          goods_id,
          goods_small_logo,
          goods_price,
          goods_name,
          buyNum: 1,
          flag: false,
        });
      }
    },
    pay() {
      // 点击立即购买触发的函数
      this.show = true;
      this.$nextTick(() => {
        new QRCode(this.$refs.qrbox, {
          // 生成二维码的函数
          text: "www.baidu.com",
          height: 100,
          width: 100,
          colorDark: "red",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H,
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.detail {
  height: 100%;
  background-color: #e9e9e9;
  .scroll {
    height: calc(100% - 100px);
    overflow-y: auto;
  }
  .my-swipe {
    font-size: 0;
  }
  .swipe_img {
    width: 100%;
    height: 200px;
  }
  .price {
    padding: 10px 15px;
    color: red;
    font-size: 18px;
    box-sizing: border-box;
    background-color: #fff;
  }
  .dec_ct {
    background-color: #fff;
    color: #666;
    font-size: 15px;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    .left {
      flex: 1;
      line-height: 20px;
      position: relative;
      // & 在这里是一个连接符
      &::after {
        // 伪元素都是行内元素
        content: "";
        display: inline-block;
        width: 2px;
        height: 30px;
        background-color: red;
        position: absolute;
        right: 0;
        top: calc(50% - 15px);
      }
    }
    // .left::after{}
    .right {
      width: 60px;
      text-align: center;
    }
  }
  .van-tabs {
    margin-top: 10px;
  }
  .attrs {
    background-color: #fff;
    font-size: 14px;
    overflow: hidden;
    li {
      margin: 10px 0;
      padding: 0 10px;
    }
  }
}
.qrbox {
  height: 100px;
  width: 100px;
  margin: 20px auto;
}
:deep(.van-tabs__line) {
  background-color: red;
}
</style>
